//
// Component: Utility
//
// ========================================================================


// Variables
// ========================================================================

@utility-container-padding-horizontal:          @global-grid-gutter;
@utility-container-large-padding-horizontal:    @global-grid-gutter-large;
@utility-container-large-max-width:             1800px;

@utility-align-horizontal:                      @global-margin;
@utility-align-vertical:                        @global-margin;

@utility-margin:                                @global-margin;

@utility-heading-large-small-font-size:         round((@global-font-size * 2.6)); // 36px / 42px
@utility-heading-large-small-line-height:       round((@utility-heading-large-small-font-size * 1.154)); // 42px / 48px
@utility-heading-large-font-size:               round((@global-font-size * 3.72)); // 52px / 60px
@utility-heading-large-line-height:             round((@utility-heading-large-font-size * 1.23)); // 64px / 74px

@utility-link-muted-color:                      @global-color;
@utility-link-muted-hover-color:                @global-color;

@utility-scrollable-box-border:                 @global-border;


// Container
// ========================================================================

.hook-container() {}


// Scrollable
// ========================================================================

.hook-scrollable-box() {
    border-left: none;
    border-right: none;
    border-color: rgba(0, 0, 0, .05);
}


// Miscellaneous
// ========================================================================

.uk-padding-horizontal-remove {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.hook-utility-misc() {

    .uk-position-center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }

    .uk-viewport-height-1-2 {
        min-height: 50vh;
    }

    .uk-viewport-height-1-3 {
        min-height: 30vh;
    }

    .uk-bg-dark { background: @global-dark-background !important; }
    .uk-bg-light { background: @global-light-background !important; }
    .uk-bg-primary { background: @global-primary-background !important; }
    .uk-bg-success { background: @global-success-background !important; }
    .uk-bg-danger { background: @global-danger-background !important;}

    .uk-bg-transparent-pattern {
        background-color: rgba(0,0,0,0);
        background-image: linear-gradient(45deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
        linear-gradient(45deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
        background-size: 20px 20px;
        background-position: 0 0, 10px 10px;
    }

    svg.inherit-color * {
        fill: currentColor;
    }

}
